<template>
    <a-modal v-bind="defaultModalProps" title="忘记密码" :width="800" :footer="null" wrap-class-name="forgot-modal-wrap"
        v-model:open="open" @cancel="handleFinished">
        <div class="flex flex-row justify-center gap-6 box-border mt-[44px]">
            <div class="step" :class="step === Step.One ? 'step-active' : ''">
                <div
                    class="size-12 flex flex-row justify-center items-center border border-solid border-[var(--color)] rounded-full">
                    <div
                        class="size-[34px] rounded-full flex flex-row justify-center items-center bg-[var(--color)] text-white font-bold text-2xl">
                        1
                    </div>
                </div>
                <div class="text-[var(--color)] text-sm font-[var(--bold)] mt-[10px]">身份验证</div>
            </div>
            <div class="h-px w-[160px] border-t border-t-solid border-t-[#ACAEB2] line"></div>
            <div class="step" :class="step === Step.Two ? 'step-active' : ''">
                <div
                    class="size-12 flex flex-row justify-center items-center border border-solid border-[var(--color)] rounded-full">
                    <div
                        class="size-[34px] rounded-full flex flex-row justify-center items-center bg-[var(--color)] text-white font-bold text-2xl">
                        2
                    </div>
                </div>
                <div class="text-[var(--color)] text-sm font-[var(--bold)] mt-[10px]">重置密码</div>
            </div>
            <div class="h-px w-[160px] border-t border-t-solid border-t-[#ACAEB2] line"></div>
            <div class="step" :class="step === Step.Three ? 'step-active' : ''">
                <div
                    class="size-12 flex flex-row justify-center items-center border border-solid border-[var(--color)] rounded-full">
                    <div
                        class="size-[34px] rounded-full flex flex-row justify-center items-center bg-[var(--color)] text-white font-bold text-2xl">
                        3
                    </div>
                </div>
                <div class="text-[var(--color)] text-sm font-[var(--bold)] mt-[10px]">重置成功</div>
            </div>
        </div>
        <Form v-bind="defaultFormProps" size="large" autocomplete="on" ref="stepOneRef" :model="stepOne"
            :rules="stepOneRules" @finish="handleStepOneFinish"
            style="width: 418px; margin-top: 58px; margin-inline: auto;" v-if="step === Step.One">
            <FormItem name="mobile" label="手机号">
                <a-input v-model:value="stepOne.mobile" placeholder="请输入手机号" prefix="+86"
                    class="!text-sm text-primary !h-12" />
            </FormItem>
            <FormItem name="code" label="验证码">
                <a-input v-model:value="stepOne.code" placeholder="请输入验证码" class="!text-sm text-primary !h-12">
                    <template #suffix>
                        <span class="touchable-opacity text-theme" :class="running ? 'cursor-not-allowed' : ''"
                            @click="triggerSend">
                            {{ running ? remain + 's' : '获取验证码' }}
                        </span>
                    </template>
                </a-input>
            </FormItem>
            <FormItem style="margin-top: 64px; text-align: center;">
                <a-button type="primary" html-type="submit" class="w-[202px] !h-12 text-sm"
                    :loading="stepOneLoading">下一步</a-button>
            </FormItem>
        </Form>
        <Form v-bind="defaultFormProps" size="large" autocomplete="on" ref="stepTwoRef" :model="stepTwo"
            :rules="stepTwoRules" @finish="handleTwoFinish" style="width: 446px; margin-top: 58px; margin-inline: auto;"
            :label-col="labelCol" v-else-if="step === Step.Two">
            <FormItem name="password" label="新密码">
                <a-input-password v-model:value="stepTwo.password" placeholder="5~15个字符，可用字母、数字"
                    class="!text-sm text-primary !h-12" />
            </FormItem>
            <FormItem name="password2" label="确认新密码">
                <a-input-password v-model:value="stepTwo.password2" placeholder="请再次输入新密码"
                    class="!text-sm text-primary !h-12" />
            </FormItem>
            <FormItem style="margin-top: 64px; text-align: center;">
                <a-button type="primary" html-type="submit" class="w-[202px] !h-12 text-sm"
                    :loading="stepTwoLoading">完成</a-button>
            </FormItem>
        </Form>
        <div class="mt-[90px] flex flex-col items-center" v-else-if="step === Step.Three">
            <div class="flex flex-row items-center gap-[10px]">
                <GpFontIcon name="icon-chenggong" class="text-[#324366] !text-2xl "/>
                <span class="font-bold text-[#324366] text-2xl">恭喜你，重置密码成功！</span>
            </div>
            <a-button type="primary" class="w-[202px] !h-12 text-sm mt-10"
                @click="handleFinished">去登录</a-button>
        </div>
    </a-modal>
</template>
<script lang="ts" setup>
import { Form, FormItem } from 'ant-design-vue';
import { defaultModalProps, defaultFormProps } from '@/constants/comp-setting';
import { postResetpassword, postSendresetpasswordcode } from '@/api/siderBar/home';
import type { Exposed } from './type';
defineOptions({
    name: 'GpForgotPass'
})
defineExpose<Exposed>({
    open() {
        open.value = true
    },
})
type StepOne = {
    mobile?: string
    code?: string
}
type StepTwo = StepOne & {
    password?: string
    password2?: string
}
enum Step {
    One,
    Two,
    Three
}
const labelCol = { style: { width: '86px' } }
const open = ref(false)
const step = ref(Step.One)
const {
    formState: stepOne,
    formLoading: stepOneLoading,
    rules: stepOneRules,
    formRef: stepOneRef,
    handleFormFinish: handleStepOne,
    resetFormState: resetStepOne
} = useFormState<StepOne>({
    getInitialState() {
        return {}
    },
    rules: {
        mobile: [
            { required: true, message: '请输入手机号' },
            { pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '手机号格式错误' }
        ],
        code: { required: true, message: '请输入验证码' }
    }
})
const { triggerSend, remain, running, reset } = useVerifyCode(60, () => stepOne.value.mobile!, mobile => postSendresetpasswordcode({ mobile }))
function handleStepOneFinish() {
    handleStepOne(async ({ code, mobile }) => {
        stepTwo.value.code = code
        stepTwo.value.mobile = mobile
        step.value = Step.Two
    })
}
const {
    formLoading: stepTwoLoading,
    formRef: stepTwoRef,
    formState: stepTwo,
    rules: stepTwoRules,
    handleFormFinish: handleStepTwo,
    resetFormState: resetStepTwo
} = useFormState<StepTwo>({
    getInitialState() {
        return {}
    },
    rules: {
        ...getPasswordRules(() => stepTwo.value, () => stepTwoRef.value)
    }
})
async function handleTwoFinish() {
    await handleStepTwo(async ({ code, mobile, password }) => {
        await postResetpassword({ code: code!, mobile: mobile!, password: password! })
    })
    step.value = Step.Three
}
function handleFinished() {
    open.value = false
    step.value = Step.One
    resetStepOne()
    resetStepTwo()
}
</script>
<style lang="less">
.forgot-modal-wrap {
    .ant-modal-content {
        height: 540px;
    }
}
</style>
<style lang="less" scoped>
.step {
    --color: #CED4DB;
    --bold: 400;
    display: flex;
    flex-direction: column;
    align-items: center;

    &.step-active {
        --color: var(--color-theme);
        --bold: 700;
    }
}

.line {
    margin-top: 24px;
}
</style>